<template>
  <view class="content">
    <view class="top">
      <view class="usercard">
        <view class="u-top">
          <view class="avatar">
            <img src="@/static/logo.png" alt="">
          </view>
          <view class="state">
            <view class="login">
              <p style="font-size: 20px;font-weight: 700;margin-bottom: 10rpx;" @click="login">登录/注册</p>
              <p style="font-size: 12px;color: #666;">登录后可体验更多功能</p>
            </view>
            <view class="userinfo" v-if="fasle">
              xxxx
            </view>
          </view>
        </view>
        <view class="u-bottom">
          <view class="business">
            <text class="total">5</text>
            <text>商机</text>
          </view>
          <view class="purchase">
            <text class="total">5</text>
            <text>采购</text>
          </view>
          <view class="finance">
            <text class="total">5</text>
            <text>财务</text>
          </view>
        </view>
      </view>
    </view>
    <view class="cell" v-if="administrator">
      <u-cell-group>
        <u-cell-item @click="tolist(1)" icon="bag-fill" title="商品管理"></u-cell-item>
        <u-cell-item @click="tolist(2)" icon="shopping-cart-fill" title="采购管理"></u-cell-item>
        <u-cell-item @click="tolist(3)" icon="setting-fill" title="订单管理"></u-cell-item>
        <!-- <u-cell-item @click="tolist(4)" icon="setting-fill" title="订单管理"></u-cell-item> -->
      </u-cell-group>
      <view class="cellTwo">
        <u-cell-item icon="setting-fill" @click='toPublicList(1)' title="商机报备"></u-cell-item>
        <u-cell-item icon="setting-fill" @click='toPublicList(2)' title="上架需求发布"></u-cell-item>
        <u-cell-item icon="setting-fill" title="上架结果反馈"></u-cell-item>
      </view>
    </view>
    <view class="uni-textarea" v-else>
      <view class="title">
        留言板
      </view>
      <textarea placeholder="留言吧!" v-model="messageBoard" />
      <view class="btn">
        <u-button @click="submit" class="successBtn" type="success" size="mini">提交</u-button>
        <u-button @click="cancel" type="info" size="mini">取消</u-button>
      </view>
    </view>
    <!-- <button @click="status">切换</button> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        administrator: true,
        messageBoard: ''
      };
    },
    methods: {
      status() {
        this.administrator = !this.administrator
      },
      tolist(id) {
        // console.log(id)
        if (id === 3) {
          uni.navigateTo({
            url: '/allList/orderList/list'
          })
        } else if (id === 2) {
          uni.navigateTo({
            url: '/allList/purchaseList/purchaseList'
          })
        }
      },
      submit(){
        if(this.messageBoard!=''){
          console.log(123);
          
          uni.showToast({
            title:'提交成功',
            icon:'success',
            duration:2000,
            success:function() {
              this.messageBoard=''
            }
          })
        }else{
          uni.showToast({
            title:'请输入内容在提交',
            icon:'error',
            duration:2000
          })
        }
      },
      login() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    background-color: #f0f0f0;
    padding-bottom: 60rpx;

    // width: 100%;
    .top {
      // margin-top: 100rpx;
      position: relative;
      width: 100%;
      height: 400rpx;
      background-color: #fd2f3d;

      .usercard {
        width: 90%;
        height: 350rpx;
        position: absolute;
        top: 45%;
        background-color: white;
        left: 5%;
        box-shadow: 0px 0px 6rpx #ccc;

        .u-top {
          padding-left: 50rpx;
          height: 200rpx;
          // background-color: skyblue;
          display: flex;
          align-items: center;

          .avatar {
            width: 150rpx;
            height: 150rpx;
            margin-right: 30rpx;

            img {
              border-radius: 50%;
              width: 100%;
              height: 100%;

            }
          }

          .username {
            // background-color: pink;
          }
        }

        .u-bottom {
          display: flex;
          justify-content: space-around;

          view {
            width: 150rpx;
            height: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            // background-color: pink;
            text {
              font-size: 12px;
            }

            .total {
              font-size: 18px;
              font-weight: 700;
              margin-bottom: 20rpx;
            }
          }
        }
      }
    }

    .cell {
      // border-radius: 10rpx;
      margin: 200rpx auto 0;
      width: 90%;
    }

    .cellTwo {
      background-color: #fff;
      margin: 30rpx auto;
      // width: 90%;
    }

    .uni-textarea {
      margin: 200rpx auto 0;
      width: 90%;
      background: #fff;
      padding: 20rpx;

      .title {
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        padding-bottom: 8rpx;
        border-bottom: 1px solid #f0f0f0;
      }

      textarea {
        margin: 0 auto;
        padding: 20rpx;
        border: 1px solid #f0f0f0;
      }
      .btn{
        text-align: center;
        margin-top: 20rpx;
       .successBtn{
          margin-right: 30rpx;
        }
      }
    }
  }
</style>